require("./UserVideo.scss")

require("../../both/base")

import UserVideoSidebar from "../UserVideoSidebar/UserVideoSidebar.jsx"
import UserVideoTab from "../UserVideoTab/UserVideoTab.jsx"
import UserVideoComment from "../UserVideoComment/UserVideoComment.jsx"
import UserVideoNote from "../UserVideoNote/UserVideoNote.jsx"
import UserVideoAttachment from "../UserVideoAttachment/UserVideoAttachment.jsx"

function isNullOrUndefined(obj) {
    return typeof obj == "undefined" || obj == null
}

class UserVideo extends React.Component {
    constructor(props) {
        super(props)

        this.limit = 10

        // comments
        var displayComments = []
        var cachedComments = this.props.comments

        var totalPage = cachedComments.length % this.limit == 0 ? parseInt(cachedComments.length / this.limit) : parseInt(cachedComments.length / this.limit) + 1
        var page = 1

        displayComments = cachedComments.slice((page - 1) * this.limit, page * this.limit)

        // notes
        var cachedNotes = this.props.notes
        var displayNotes = cachedNotes.slice((page - 1) * this.limit, page * this.limit)


        // relatedCourses
        var courses = this.props.courses
        const majors = ["Web", "Android", "IOS", "UI", "嵌入式"]

        var relatedCourses = courses[majors.indexOf(this.props.course.major)]
        relatedCourses = relatedCourses.splice(0, 5)  // 最多5个
        for (var r of relatedCourses) {
            r.href = `/user_video/${r.id}`
        }

        var recommendedCourses = []
        for (var c of courses) {
            if (c.length !== 0) {
                c[0].href = `/user_video/${c[0].id}`
                recommendedCourses.push(c[0])
            }
        }


        this.state = {
            choosen: 0,

            totalPage: totalPage,

            page: page,

            // 每页20条，最多6页显示
            comments: displayComments,

            // 笔记每页20条，最多6页显示
            notes: displayNotes,

            // 附件
            files: [{
                title: "授课源码",
                href: "http://localhost:3010"
            }, {
                title: "授课源码",
                href: "http://localhost:3010"
            }, {
                title: "授课源码",
                href: "http://localhost:3010"
            }],

            // 推荐课程
            recommendedCourses: recommendedCourses,

            // 相关课程
            relatedCourses: relatedCourses
        }
    }

    addComment(comment) {
        var newComments = Array.prototype.concat.call(this.state.comments, [])
        newComments.unshift(comment)
        this.setState({
            comments: newComments
        })
    }

    addNote(note) {
        var newNotes = Array.prototype.concat.call(this.state.notes, [])
        newNotes.unshift(note)
        this.setState({
            notes: newNotes
        })
    }

    addStar(commentId) {
        var newComments = Array.prototype.concat.call(this.state.comments, [])
        var newNotes = Array.prototype.concat.call(this.state.notes, [])
        for (var c of newComments) {
            if (c.id == commentId) {
                c.star += 1
                break
            }
        }
        for (var n of newNotes) {
            if (n.id == commentId) {
                n.star += 1
                break
            }
        }
        this.setState({
            comments: newComments,
            notes: newNotes
        })
    }

    changePage(page) {
        // comment
        if (this.state.choosen == 0) {
            var cachedComments = this.props.comments
            var displayComments = cachedComments.slice((page - 1) * this.limit, page * this.limit)
            this.setState({
                comments: displayComments,
                page: page
            })
        }
        // notes
        else if (this.state.choosen == 1) {
            var cachedNotes = this.props.notes
            var displayNotes = cachedNotes.slice((page - 1) * this.limit, page * this.limit)
            this.setState({
                notes: displayNotes,
                page: page
            })
        }

    }

    componentDidMount() {
        const {course} = this.props

        jwplayer("video_cr").setup({
            "autostart": true,
            "controls": true,
            "displaydescription": true,
            "file": course.location,
            // "image": "/upload/example.jpg",
            "stretching": "uniform",
            "width": "100%",
            "height": 500,
            "skin": {
                "name": "six"
            },
            "key": "c3imBsxqNKqKLN38V5P5N2vrpWIgFWH0FodRLw==",
            "flashplayer": "/p_dist/jwplayer/jwplayer.flash.swf"
        })

        jwplayer().on('ready', () => {
            jwplayer().resize("100%", window.innerHeight - 140);
        })
    }

    componentWillReceiveProps(nextProps) {
    }

    changeTab(choosen) {
        var self = this
        self.setState({
            choosen
        })

        // comment
        if (choosen == 0) {
            self.setState({
                totalPage: this.props.comments.length % this.limit == 0 ? parseInt(this.props.comments.length / this.limit) : parseInt(this.props.comments.length / this.limit) + 1,
                page: 1
            })


        }
        // notes
        else if (choosen == 1) {
            self.setState({
                totalPage: this.props.notes.length % this.limit == 0 ? parseInt(this.props.notes.length / this.limit) : parseInt(this.props.notes.length / this.limit) + 1,
                page: 1
            })
        }
    }

    render() {
        const changeTab = this.changeTab.bind(this)
        const addComment = this.addComment.bind(this)
        const addNote = this.addNote.bind(this)
        const addStar = this.addStar.bind(this)
        const changePage = this.changePage.bind(this)

        return (
            <div className="user_video_cr bln">
                <div className="video_wr">
                    <div id="video_cr" className="video_cr"></div>
                    <UserVideoSidebar addNote={addNote} courseId={this.props.course.id} logined={this.props.logined}
                                      userEmail={this.props.userEmail}/>
                </div>
                <div className="video_ext_wr">
                    <div className="video_tab_wr">
                        <UserVideoTab emit={changeTab}/>
                        <div className="video_comment_area_wr">
                            {
                                this.state.choosen == 0 && <UserVideoComment totalPage={this.state.totalPage}
                                                                             changePage={changePage}
                                                                             page={this.state.page}
                                                                             addStar={addStar}
                                                                             addComment={addComment}
                                                                             avatar={this.props.avatar}
                                                                             courseId={this.props.course.id}
                                                                             comments={this.state.comments}
                                                                             isComment={true}
                                                                             logined={this.props.logined}/>
                            }
                            {
                                this.state.choosen == 1 && <UserVideoComment totalPage={this.state.totalPage}
                                                                             changePage={changePage}
                                                                             page={this.state.page}
                                                                             addStar={addStar}
                                                                             courseId={this.props.course.id}
                                                                             comments={this.state.notes}
                                                                             isNote={true}
                                                                             logined={this.props.logined}/>
                            }
                        </div>
                    </div>
                    <div className="video_attachment">
                        <div className="user_video_attachment_cr bln">
                            <div className="title">课程说明</div>
                            <ul className="user_video_attachment">
                                <div className="description">
                                    {this.props.course.description}
                                </div>
                            </ul>
                        </div>
                        <UserVideoAttachment isFile={true} listData={this.props.files} title="资料下载"/>
                        <UserVideoAttachment listData={this.state.relatedCourses} title="相关课程"/>
                        <UserVideoAttachment listData={this.state.recommendedCourses} title="推荐课程"/>
                    </div>
                </div>
            </div>
        )
    }
}

export default UserVideo